<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
        }
        .box1{
            width: 100%;
            height: 50px;
            background: lavender;
        }
        .liang{
            background: crimson;
            color: white;
            border: 0;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            margin: 10px;
        }
        .sou{
            width: 150px;
            height: 18px;
            border-radius: 3px;
            margin: 10px;
        }
        table{
            margin-top: 15px;
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            background-color: #8bb7ca;
        }
        th{
            border: 1px solid silver;
        }
        th:active{color: red}
        th:hover{color: red}
        td{
            border: 1px solid silver;
        }
        .kuang{
            margin-left:30%;
            font-family: 宋体;
            font-size: 14px;
            font-weight:bold;
        }
        .lyy{
            width: 1000px;
            height: 30px;
            margin-top: 22%;
            margin-left: 48%;
        }
        .sb{
            border: 0;
            background: #2D93CA;
            margin-top: -3px;
            width: 70px;
            height: 30px;
            border-radius: 5px;
        }
        .zhuan1{
            width: 50px;
            height: 20px;
        }
        .zhuan2{
            border: solid;
            color: #2D93CA;
            font-weight: bold;
            font-size: 20px;
            background: transparent;

            border: 0;
        }
        .dao{
            font-family: 黑体;
            font-size: 17px;
        }
        .fa{
            background-color: #a1adcc;
        }
        .btn{
            background: orange;
            color: white;
            border: 0;
            width: 80px;
            height: 30px;
            border-radius: 5px;
        }
    </style>
    <script src="/resources/js/jquery-1.7.1.min.js" type="application/javascript"></script>
    <script src="/resources/js/jquery-ui-1.8.10.custom.min.js" type="text/css"></script>
</head>

<script>
    $(function () {
        readList(1)
        $.getJSON("/selectCategory",{},function (data) {
            $("#leibie").empty();
            var leibie = '<option value="">全部</option>';
            for(var i = 0 ;i < data.length;i++){
                var lei = data[i];
                leibie +='<option>'+lei.category+'</option>'
            }
            $("#leibie").append(leibie);
        })
    })
    function jiantou() {
        var x = $("input[name='zhuan']").val();

        readList(x);
    }
    function readList(pageNum) {
        if(pageNum ==1){
            pageNum = 1;
        }
        var formData = $("#form1").serialize();
        formData += "&pageNum="+pageNum;
        $.ajax({
            url:"/selectDrugInformation",
            data:formData,
            dataType:"json",
            type:"post",
            success:function (data) {
                da = data;
                var table = "";
                var list = data.list;
                $("#table").empty();
                for(var i = 0; i < list.length;i++){
                    var zhi = list[i];
                    if(zhi.serialNumber == null){
                        zhi.serialNumber = "";
                    }
                    if(zhi.commonName == null){
                        zhi.commonName = "";
                    }
                    if(zhi.dosageForm == null){
                        zhi.dosageForm = "";
                    }
                    if(zhi.size == null){
                        zhi.size = "";
                    }
                    if(zhi.unit == null){
                        zhi.unit = "";
                    }
                    if(zhi.factor == null){
                        zhi.factor = "";
                    }
                    if(zhi.productionName == null){
                        zhi.productionName = "";
                    }
                    if(zhi.commodityName == null){
                        zhi.commodityName = "";
                    }
                    if(zhi.winPrice == null){
                        zhi.winPrice = "";
                    }
                    if(zhi.zhiliang == null){
                        zhi.zhiliang = "";
                    }
                    if(zhi.category == null){
                        zhi.category = "";
                    }
                    if(zhi.zhuangtai == null){
                        zhi.zhuangtai = "";
                    }
                    table +='<tr>' +
                        '<td>'+zhi.serialNumber+'</td>' +
                        '<td>'+zhi.commonName+'</td>'+
                        '<td>'+zhi.dosageForm+'</td>'+
                        '<td>'+zhi.size+'</td>'+
                        '<td>'+zhi.unit+'</td>'+
                        '<td>'+zhi.factor+'</td>'+
                        '<td>'+zhi.productionName+'</td>'+
                        '<td>'+zhi.commodityName+'</td>'+
                        '<td>'+zhi.winPrice+'</td>'+
                        '<td>'+zhi.zhiliang+'</td>'+
                        '<td>'+zhi.category+'</td>'+
                        '<td>'+zhi.zhuangtai+'</td>'+
                        '<td><a href="Particular.html?id='+zhi.id+'"><button class="btn">查看</button></td>'+
                        '</tr>'
                }
                $("#table").append(table);
            }
        })
    }
    function selectList() {
        location.href="/selectList";
    }

</script>
<body>
<div class="box">
    <h3>药品信息查询</h3>
    <hr>
    <form action="" method="post" id="form1" class="fa">
        <div class="kuang">
            药品流水号:
            <input type="text" placeholder="输入药品流水号" class="sou" name="serialNumber"/>
            通用名：
            <input type="text" placeholder="输入通用名" class="sou" name="commonName"/>
            <br/>
            &nbsp;&nbsp;
            剂型：
            <input type="text" placeholder="输入剂型" class="sou" name="dosageForm"/>
            &nbsp;
            规格：
            <input type="text" placeholder="输入规格" class="sou" name="size"/>
            <br/>
            &nbsp;&nbsp;
            单位：
            <input type="text" placeholder="输入单位" class="sou" name="unit"/>
            转换系数:
            <input type="text" placeholder="输入转换系数" class="sou" name="factor"/>
            <br/>
            生产企业：
            <input type="text" placeholder="输入生产企业" class="sou" name="productionName">
            &nbsp;
            商品名:
            <input type="text" placeholder="输入商品名" class="sou" name="productName">
            <br/>
            价格范围：
            <input type="text" class="sou" name="winPriceMin" style="width: 50px">至<input type="text" class="sou" name="winPriceMax" style="width: 50px">
            质量层次：
            <select class="sou" id="" name="quality">
                <option value="">全部</option>
                <option value=1>国家一类新药</option>
                <option value=2>国家科学进步奖</option>
                <option value=3>专利</option>
                <option value=4>原研</option>
                <option value=5>单独定价</option>
                <option value=6>优质优价</option>
                <option value=7>GMP</option>
            </select>
            <br/>
            &nbsp;
            药品类别:
            <select class="sou" id="leibie" name="category">
                <option value="">全部</option>
            </select>
            &nbsp;
            状态：
            <select type="text"class="sou" name="transaction" id="zhuangtai">
                <option value="">全部</option>
                <option value=1>正常</option>
                <option value=2>取消交易</option>
            </select>
        </div>
    </form>
</div>
<div class="box1">
    &nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="liang" onclick="selectList()">导出</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="liang" onclick="readList(1)">查询</button>
</div>
<table>
    <thead>
    <tr>
        <th>药品流水号</th>
        <th>通用名</th>
        <th>剂型</th>
        <th>规格</th>
        <th>单位</th>
        <th>转换系数</th>
        <th>生产企业</th>
        <th>商品名称</th>
        <th>中标价</th>
        <th>质量层次</th>
        <th>药品类别</th>
        <th>状态</th>
        <th>详细</th>
    </tr>
    </thead>
    <tbody id="table">

    </tbody>
</table>
<div class="lyy" style="margin: 10px">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(1)">首页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.prePage)">上一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.nextPage)">下一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.pages)">尾页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="dao">转到</span><input class="zhuan1" name="zhuan" type="text"><span class="dao">页</span><button class="zhuan2"><span class="jian" onclick="jiantou()">⇨</span></button>
</div>
</body>
</html>
